<template>
<div id="profile">
<!--  这是头部-->
  <div class="navbar">
  <NavBar>
    <div slot="left"><van-icon name="envelop-o"></van-icon> </div>
    <div slot="center">我的</div>
    <div slot="right" @click="setting"><van-icon name="setting-o"></van-icon></div>
  </NavBar>
    </div>
<!--  这是头像区域-->
  <div class="head_portrait">
    <profile_header :imgsrc="infoMessage['img_header']">
      <div slot="left_header"></div>

        			<div class="fr" slot="center_header">
				<div  class="login_btn fl">
          <div class="namebox">
          <span class="nickname">{{infoMessage['nickname']}}</span>
            </div>
          <div>
            <span class="introduce">{{infoMessage['intro']|ellipsis}}</span>
          </div>
				</div>
      <div class="tag_profile">
<!--        <span>粉丝 {{fans_count}}</span>-->
<!--        <span> 关注 {{fans_count}}</span>-->
<!--        <span> 获赞 {{fans_count}}</span>-->

      </div>
      </div>
      <div slot="right_header">
        <van-tag round type="primary" size="large" color="#66FFCC">修改资料</van-tag>
      </div>
    </profile_header>
  </div>
  <div class="info_message">
  <van-grid>
  <van-grid-item  text="我的订单" class="my_order" @click="$router.push('/orderlist')">
<!--    <van-icon name="orders-o" color="red" slot="icon" class="order-icon"/>-->
          <span class="my-icon icon1" style="color:red">&#xe60b;</span>
    <span class="box-title">我的订单</span>
  </van-grid-item>
  <van-grid-item icon="photo-o" text="浏览历史" @click="$router.push('/history_goods')">
          <span class="my-icon icon1" style="color:red">&#xe62c;</span>
    <span class="box-title">浏览历史</span>
  </van-grid-item>
  <van-grid-item icon="photo-o" text="我的帖子" >
              <span class="my-icon icon1" style="color:red">&#xe8ec;</span>
    <span class="box-title">我的帖子</span>
      </van-grid-item>
  <van-grid-item icon="photo-o" text="收藏夹" >
              <span class="my-icon icon1" style="color:red">&#xe629;</span>
    <span class="box-title">收藏夹</span>
      </van-grid-item>
</van-grid>
    </div>
     <div class="cell_1"><van-cell title="我的账户" is-link value="羽币：0 | 羽毛：540" /></div>
    <div class="cell_2">
     <div > <van-cell title="球友" is-link /></div>
      <van-cell title="当前等级" is-link value="Lv1升级还需32点" />
    </div>
    <div class="cell_3">
      <van-cell title="我参与的活动" is-link />
      <van-cell title="活动" is-link value="共参加0场" />
      <van-cell title="俱乐部" is-link value="0" />
    </div>
    <div class="cell_4" >
      <van-cell title="退出登录"  />
    </div>
</div>
</template>

<script>
import NavBar from "@/components/common/NavBar/NavBar";
import profile_header from "@/views/profile/profile_header";
import {getCookie} from "@/common/common";
import {Infomessage} from "@/network/Users/get_info";

export default {
name: "Profile",
  components:{
  NavBar,
    profile_header
  },
  data(){
  return{
    'header_img':'https://img01.yzcdn.cn/vant/cat.jpeg',
    'username':'',
    'fans_count':0,
    'foucus_count':0,
    'praise_count':0,
    'infoMessage':[]
  }
  },
  methods:{
setting(){
  this.$router.push('/setting')
  console.log(111)
}
  },
  created() {
  this.$emit('header',true)
  this.username=getCookie('username')
  Infomessage().then(
      res=>{
        this.infoMessage=res.info_data
      }
  )
  },
   filters: {
     ellipsis(value) {
       if (!value) return ''
       if (value.length > 14) {
         return value.slice(0, 14) + '......'
       }
       return value
     },
   }
}
</script>

<style scoped>
#profile{
  background-color: rgb(247,248,250);
  height: 100vh;
}
.navbar .van-icon{
  font-size: 22px;
  margin-top: 12px;
}
.head_portrait{
  margin-top: 10px;
}
.login_btn span{
  padding-top: 20px;
  font-size: 25px;
  color: black;
  display: block;
}
.tag_profile{
  position: relative;
    top: 9px;
    left: 23px;
    font-size: 14px;
}
#profile_header > div.right > div > span{
    height: 28px;
    width: 90px;
    position: relative;
    right: -21px;
    top: 31px;
  color: darkgreen;
}
.info_message{
  margin-top: 10px;
}
.order-icon{
  font-size: 28px;
}

.cell_1,.cell_3{
  padding: 15px 0px;
}
.cell_4 > div:nth-child(1) > div:nth-child(1) > span:nth-child(1){
  font-size: 13px;
color: red;
margin-left: 5px;
}
@font-face {
  font-family: 'my-icon';
  src: url('//at.alicdn.com/t/font_3196381_gzf3xbjhes.woff2?t=1646404752192') format('woff2'),
       url('//at.alicdn.com/t/font_3196381_gzf3xbjhes.woff?t=1646404752192') format('woff'),
       url('//at.alicdn.com/t/font_3196381_gzf3xbjhes.ttf?t=1646404752192') format('truetype');

}
.my-icon {
  font-family: "my-icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*color: wheat;*/
}
.icon1{
  font-size: 28px;

}
.box-title{
  font-size: 12px;
  margin-top: 3px;
}
.nickname{
  font-size: 18px!important;
color: black;
display: block;

width: 140px;
text-align: left;
margin-left: 70px;
}
.introduce{
  font-size: 14px!important;
color: #969799!important;
text-align: left!important;
margin-left: 69px!important;

padding-top: 8px!important;
}
</style>